<template>
  <v-chart :option="option" autoresize :loading="load" class="pack"></v-chart>
</template>

<script>
import {ref, defineComponent} from "vue";
import * as echarts from 'echarts'
export default defineComponent({
  name: "BaseLineChart",
  data(){
    let option = {
      //你的代码
      backgroundColor: '#081736',
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          lineStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: 'rgba(0, 255, 233,0)'
              }, {
                offset: 0.5,
                color: 'rgba(255, 255, 255,1)',
              }, {
                offset: 1,
                color: 'rgba(0, 255, 233,0)'
              }],
              global: false
            }
          },
        },
      },
      legend: {
        x: '46%',
        top: '0%',
        color: '#fff',
        fontSize: 12,
        data: ["历史事件"]
      },

      grid: {
        top: '21%',
        left: '12%',
        right: '5%',
        bottom: '10%',
        // containLabel: true
      },
      xAxis: [{
        type: 'category',
        axisLine: {
          show: false,
          color: '#A582EA'
        },

        axisLabel: {
          color: '#fff',
          width: 100
        },
        splitLine: {
          show: false
        },
        boundaryGap: false,
        data: [
          '11/12',
          '11/13',
          '11/14',
          '11/15',
          '11/16',
          '11/17',
          '11/18',
          '11/19',
          '11/20',
          '11/21',
          '11/22',
          '11/23',
          '11/24',
          '11/25',
          '11/26',
          '11/27',
          '11/28',
          '11/29',
          '11/30',
          '12/01',
          '12/02',
          '12/03',
          '12/04',
          '12/05',
          '12/06',
          '12/07',
          '12/08',
          '12/09',
          '12/10',
          '12/11',
        ]        //this.$moment(data.times).format("HH-mm") ,
      }],
      yAxis: [{
        name: "单位：件",
        nameTextStyle: {
          color: '#fff',
          fontSize: 12,
        },
        type: 'value',
        min: 0,
        splitNumber: 10,
        splitLine: {
          show: true,
          lineStyle: {
            color: '#00BFF3',
            opacity: 0.23
          }
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: true,
          margin: 15,
          color: '#fff',
        },
        axisTick: {
          show: false,
        },
      }],
      series: [
        {
          name: '历史事件',
          type: 'line',
          showAllSymbol: true,
          symbol: 'circle',
          symbolSize: 5,
          lineStyle: {
            color: "#2CABE3",
          },

          label: {
            show: true,
            position: 'top',
            color: '#2CABE3',
            fontSize: 10
          },
          itemStyle: {
            color: "#2CABE3",
            borderColor: "#2CABE3",
            borderWidth: 0,
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(81,150,164,0.3)'
                },
                {
                  offset: 1,
                  color: 'rgba(81,150,164,0)'
                }
              ], false),
          },
          data: [100.08,
            136.97,
            142.37,
            135.04,
            159.28,
            157.08,
            66.14,
            149.27,
            186.26,
            0,
            0,
            170.3,
            111.31,
            54.86,
            119.06,
            109.57,
            105.31,
            34.87,
            129.04,
            35.33,
            0,
            31.51,
            127.09,
            136.76,
            188.59,
            142.03,
            126.7,
            133.33,
            124.09,
            67.43,
          ]//data.values
        },
      ]
    }
    return{
      load: ref(false),
      option:ref(option)
    }
  }

})
</script>

<style scoped>

</style>